<template>
  <el-card>
    <!--搜索组件-->
    <search-device :word-search="wordSearchForm" 
                   :parent-course-data="parentCourseData" 
                   :child-course-data="childCourseData" 
                   @updateCourseChange="updateCourseChange"
                   @onSearch="onSearch"/>
    <!--按钮组件-->
    <word-option @addWordBtn="addWordBtn"/>
    <!-- 分隔符 -->
    <hr />
    <!-- 数据展示 -->
    <word-data :form-definition="wordDataPageForm" :data="datas" @delete="myDeleteWord" @update="myUpdateWord"/>
    <!-- 数据分页 -->
    <page :total="dataTotal" :currentPage="wordSearchForm.currentPage" :data="datas" @pageSizeChange="pageSizeChange" @currentPageChange="currentPageChange" />
    <!--对话框-->
    <el-dialog width="980px" :visible.sync="dialogSwitch" :before-close="beforeClose" :close-on-click-modal="false"
            :destroy-on-close="true">
            <word-add v-if="switchType == 'add'" 
                :word-add="wordAddDataForm" 
                :parent-course-data="parentCourseData" 
                :child-course-data="childCourseData"
                @updateCourseChange="updateCourseChange"
                ref="wordAddFormRef"/>
            <word-update v-if="switchType == 'update'" 
                :word-update="wordUpdateDataForm" 
                :parent-course-data="parentCourseData" 
                :child-course-data="childCourseData"
                @updateCourseChange="updateCourseChange"
                ref="wordUpdateFormRef"/>
            <!-- 对话框组件的按钮-->
            <template #footer>
                <el-button @click="confirmExecute" type="primary" size="mini">确认</el-button>
                <el-button @click="switchEvent" type="info" size="mini">取消</el-button>
            </template>
    </el-dialog>
  </el-card>
</template>

<script>
import searchDevice from './wordSearch.vue'
import wordOption from './wordOptionBtn.vue'
import wordData from './wordData.vue'
import { wordSearchForm } from "./entity/wordSearch"
import { wordDataPageForm } from './entity/wordDataPage'
import { wordAddDataForm } from './entity/wordAddDataForm'
import { wordUpdateDataForm } from './entity/wordUpdateDataForm'
import page from "@/components/common/page.vue";
import { getWordsPage,addWordsApi,deleteWord,updateWordsApi,getCourseTreeApi} from '@/api/words/wordApi';
import commonDialog from '@/components/common/commonDialog.vue';
import wordAdd from './wordAdd.vue';
import wordUpdate from './wordUpdate.vue';
export default {
    components: {searchDevice,wordOption,wordData,page,commonDialog,wordAdd,wordUpdate},
    data() {
        return {
            wordSearchForm,
            wordDataPageForm,
            dataTotal:10,
            datas:[],
            wordUpdateDataForm,
            dialogSwitch: false,//控制对话框的开启
            wordAddDataForm,//对话框添加使用的对象
            switchType: '',//对话框打开的类型
            //渲染主课程的数据
            parentCourseData:[],
            //渲染子课程的数据
            childCourseData:[]
        };
    },
    methods:{
        //获取父课程树（数据）
        getCourseTree(){
            getCourseTreeApi().then(data=>{
                this.parentCourseData = data.map(item=>({value:item.courseId,label:item.courseName}));
            }).catch(err=>{
                this.$message.error(err);
            })
        },
        //课程发生变更,获取子课程树(数据)
        updateCourseChange(parentId,type){
            if(type === 'search') this.wordSearchForm.courseIds = [];
            else if(type === 'add') this.wordAddDataForm.courseId = null;
            else if(type === 'update') this.wordUpdateDataForm.courseId = null;
            getCourseTreeApi().then(data=>{
                let result = data.find(node=>node.courseId == parentId);
                if(result && result.child && result.child.length > 0){
                    this.childCourseData = result.child.map(item=>({value:item.courseId,label:item.courseName}))
                }
            }).catch(err=>{
                this.$message.error(err);
            })
        },
        //加载单词分页数据
        localWordPageData(wordSearchForm){
            let query = this.$deepCopy(wordSearchForm);
            if (query.courseParentId === 'ALL') {
                query.courseParentId = null;
            }
            if (query.courseId === 'ALL') {
                query.courseId = null;
            }
            if(query.wordTagIds === "ALL"){
                query.wordTagIds = null;
            }
            getWordsPage(query).then(data => {
                this.dataTotal = data.total;
                this.datas = data.result;
            }).catch(err => {
                this.$message.error(err);
            })
        },
        onSearch(){
            this.wordSearchForm.currentPage=1;
            this.wordSearchForm.pageSize=10;
            this.localWordPageData(this.wordSearchForm);
        },
        //页面大小变更-事件
        pageSizeChange(pageSize) {
            this.wordSearchForm.pageSize = pageSize;
            this.localWordPageData(this.wordSearchForm);
        },
        //当前页变更-事件
        currentPageChange(currentPage) {
            this.wordSearchForm.currentPage = currentPage;
            this.localWordPageData(this.wordSearchForm);
        },
        //新增按钮执行事件
        addWordBtn() {
            this.switchType = 'add';
            this.switchEvent();
        },
        //更新按钮执行事件
        updateWordBtn(){
            this.switchType = 'update';
            this.switchEvent();
        },
        //是否开启对话框
        switchEvent() {
            this.dialogSwitch = !this.dialogSwitch;
            //关闭后将添加参数重置
            if(this.switchType == 'add' && this.dialogSwitch === false){
                this.wordAddDataForm = {
                    zhWord:"",
                    riWord:"",
                    riWordKana:"",
                    courseParentId:null,
                    courseId:null,
                    wordTagId:'9',
                    fileId:0
                }
            }
        },
        //对话框关闭前校验
        beforeClose(done) {
            if (this.visible) {
                done();
            } else {
                done(false);
            }
        },
        //新增或修改对话框确认执行按钮的事件
        confirmExecute() {
            let fileId = this.$recorder.getFileId();
            if(this.switchType == 'add'){
                if(fileId){
                    this.wordAddDataForm.fileId =  fileId;
                    addWordsApi(this.wordAddDataForm).then(data=>{
                        this.$message.success("操作成功");
                        this.$refs.wordAddFormRef.reset();
                        //关闭对话框
                        this.switchEvent();
                        //重新加载单词数据
                        this.localWordPageData(this.wordSearchForm);
                    }).catch(err => {
                        this.$message.error(err);
                    }) 
                    this.wordAddDataForm.fileId = 0;
                }else{
                    this.$message.error("请录入单词发音")
                }
            }else if(this.switchType == 'update'){
                if(fileId){
                    this.wordUpdateDataForm.fileId = fileId;
                }
                updateWordsApi(this.wordUpdateDataForm).then(data=>{
                    this.$message.success("操作成功");
                    this.$refs.wordUpdateFormRef.reset();
                    //关闭对话框
                    this.switchEvent();
                    //重新加载单词数据
                    this.localWordPageData(this.wordSearchForm);
                }).catch(err => {
                    this.$message.error(err)
                })
                this.wordUpdateDataForm.fileId = 0;
            }
            this.$recorder.resetFileId();         
        },
        //删除单词
        myDeleteWord(row){
            this.$confirm(`确认是否要删除[${row.riWord}]?`,"操作确认",{
                confirmButtonText:"确认",
                cancelButtonText:"取消",
                type:"warning",
            }).then(()=>{
                deleteWord(row.wordId).then((data)=>{
                    this.localWordPageData(this.wordSearchForm);
                    this.$message.success("删除成功");
                }).catch((err)=>{
                    this.$message.error(err);
                })
            }).catch(()=>{});
        },
        //修改单词
        myUpdateWord(row){
            this.updateCourseChange(row.courseParentId);
            row.wordTagId = row.wordTagId.toString();
            this.wordUpdateDataForm = row;
            this.updateWordBtn();
        }
    },
    mounted(){
        //将跳转携带的数据进行搜索
        if(this.$route.params.dataEntity){
            //搜索具体课程
            if(this.$route.params.dataEntity.parentId != 0){
                this.wordSearchForm.courseIds = [this.$route.params.dataEntity.courseId]
                this.wordSearchForm.courseParentId = this.$route.params.dataEntity.parentId;
                getCourseTreeApi().then(data=>{
                    let result = data.find(node=>node.courseId == this.wordSearchForm.courseParentId);
                    if(result && result.child && result.child.length > 0){
                        this.childCourseData = result.child.map(item=>({value:item.courseId,label:item.courseName}))
                    }
                }).catch(err=>{
                    this.$message.error(err);
                })
            }
            //搜索大课程
            else{
                this.wordSearchForm.courseParentId = this.$route.params.dataEntity.courseId;
                this.wordSearchForm.courseIds = []
            }
        }
        //获取课程数据
        this.getCourseTree();
        //获取单词分页数据
        this.localWordPageData(this.wordSearchForm);
        
    },
    watch:{
        
    }
}
</script>

<style scoped lang="scss"></style>
